<html>
	<head>
		<meta charset='utf-8'>
		<title>Geometrizer</title>
		<script type="text/javascript">
			function calcCircumfrence(radio){
				var perimetro=Math.PI*(radio*2);
				calcArea(radio,perimetro);
			}
			function calcArea(radio,perimetro){
				var area=Math.PI*(Math.pow(radio,2));

				alert("El perimetro del circulo es: "+perimetro+" y su área es de: "+area);
			}
		</script>
		<style type="text/css">
			html,body{
    			height: 100%;
			}
			body{
			   	display: table; 
   				margin: 0 auto;
			}
			div.Principal{
				display: table-cell;   
    			vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class='principal'>
			<h1>Círculo</h1>
			<form>
				<label> Ingrese el radio del círculo: </label>
				<input type='text' id='radio' value=''>
				<br><br>
				<input type='button' value='Calcular' onClick="calcCircumfrence(document.getElementById('radio').value);">
			</form>
		</div>
	</body>
</html>
